<!-- 复杂详情路由模板
    {
        path: '/dp/dataElem',
        component: Layout,
        redirect: 'dataElem',
        hidden: true,
        children: [
            {
                path: 'dpDataElemDetail',
                component: () => import('@/views/dp/dataElem/detail/user.vue'),
                name: 'tree',
                meta: { title: '数据元详情', activeMenu: '/dp/dpDataElem'  }
            }
        ]
    }
 -->

<template>
    <div class="app-container" ref="app-container">
        <div class="pagecont-top" v-show="showSearch" style="padding-bottom: 15px">
            <div class="infotop">
                <div class="infotop-title mb15">
                    {{ dpDataElemDetail.name || '-' }}
                </div>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">英文名称</div>
                            <div class="infotop-row-value">
                                {{ dpDataElemDetail.engName || '-' }}
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">类目编码</div>
                            <div class="infotop-row-value">
                                {{ dpDataElemDetail.catName || '-' }}
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">类型</div>
                            <div class="infotop-row-value">
                                <dict-tag
                                    :options="dp_data_elem_code_type"
                                    :value="dpDataElemDetail.type"
                                />
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">责任人</div>
                            <div class="infotop-row-value">
                                {{ dpDataElemDetail.personCharge || '-' }}
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">联系电话</div>
                            <div class="infotop-row-value">
                                {{ dpDataElemDetail.contactNumber || '-' }}
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">字段类型</div>
                            <div class="infotop-row-value">
                                <dict-tag
                                    :options="column_type"
                                    :value="dpDataElemDetail.columnType"
                                />
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">状态</div>
                            <div class="infotop-row-value">
                                <dict-tag :options="sys_disable" :value="dpDataElemDetail.status" />
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">创建时间</div>
                            <div class="infotop-row-value">
                                {{ parseTime(dpDataElemDetail.createTime, '{y}-{m}-{d}') }}
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">创建人</div>
                            <div class="infotop-row-value">
                                {{ dpDataElemDetail.createBy || '-' }}
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="infotop-row border-top">
                            <div class="infotop-row-lable">描述</div>
                            <div class="infotop-row-value">
                                {{ dpDataElemDetail.description || '-' }}
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="pagecont-bottom">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="代码字典" name="1">
                    <dataElemCodeList />
                </el-tab-pane>
                <el-tab-pane label="代码映射" name="2">
                    <dpCodeMap />
                </el-tab-pane>
                <el-tab-pane label="关联信息" name="3">
                    <dpDataElemAssetRel />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup name="DpDataElem">
    import { getDpDataElem } from '@/api/dp/dataElem/dpDataElem';
    import { useRoute } from 'vue-router';
    import dataElemCodeList from '@/views/dp/dataElem/detail/dataElemCodeList.vue';
    import dpCodeMap from '@/views/dp/dataElem/detail/dpCodeMap.vue';
    import dpDataElemAssetRel from '@/views/dp/dataElem/detail/dpDataElemAssetRel.vue';

    const { proxy } = getCurrentInstance();
    const { column_type, sys_disable, dp_data_elem_code_type } = proxy.useDict(
        'column_type',
        'sys_disable',
        'dp_data_elem_code_type'
    );

    const activeName = ref('1');

    const handleClick = (tab, event) => {
        console.log(tab, event);
    };

    const showSearch = ref(true);
    const route = useRoute();
    let id = route.query.id || 1;
    // 监听 id 变化
    watch(
        () => route.query.id,
        (newId) => {
            id = newId || -1; // 如果 id 为空，使用默认值 1
            getDpDataElemDetailById();
        },
        { immediate: true } // `immediate` 为 true 表示页面加载时也会立即执行一次 watch
    );
    const data = reactive({
        dpDataElemDetail: {},
        form: {}
    });

    const { dpDataElemDetail, form } = toRefs(data);

    /** 复杂详情页面上方表单查询 */
    function getDpDataElemDetailById() {
        const _id = id;
        if (!id || id == -1) return;
        getDpDataElem(_id).then((response) => {
            if (!response.data) return;
            dpDataElemDetail.value = response.data;
            console.log(dpDataElemDetail.value);
        });
    }
    // 页面加载时获取数据
    onMounted(() => {
        getDpDataElemDetailById();
    });
</script>

<style scoped lang="scss">
.app-container {
  margin: 15px 15px 0px 15px;
  .pagecont-bottom {
    min-height: calc(100vh - 414px) !important;
  }
}
</style>
